<template>
  <div>
    <!-- 卡片 -->
    <a-row :gutter="24" style="margin: 10px">
      <a-col :sm="6" class="padding-r-no" v-for="(card, index) in cardInfo" :key="index">
        <div class="card-inner">
          <div class="title">{{ card.title }}</div>
          <div class="total" :style="{ color: card.color }">{{ topStatus[card.total] }}</div>
          <div class="progress">
            <a-progress :showInfo="false" :strokeColor="card.color" :percent="card.percent" />
          </div>
          <div v-if="!card.showInfo" class="date"> {{ startTime }}-{{ endTime }} </div>
          <div v-if="card.showInfo" class="progress color-grey">
            <span>{{ l('progress') }}</span>
            <span>{{ card.percent }}%</span>
          </div>
        </div>
      </a-col>
    </a-row>
    <a-row :gutter="24" style="margin: 0 10px">
      <a-col :sm="13" class="padding-r-no">
        <div class="statistics">
          <!-- 统计头部 -->
          <div class="flex-header">
            <div>
              <pie-chart-outlined class="color-green font-16" />
              <span class="title color-green"> {{ l('IncomeStatistics') }}</span>
              {{ startTime }}-{{ endTime }}
            </div>
            <div>
              <a-radio-group v-model:value="dataPicker">
                <a-radio-button value="daily">{{ l('daily') }}</a-radio-button>
                <a-radio-button value="weekly">{{ l('weekly') }}</a-radio-button>
                <a-radio-button value="month">{{ l('month') }}</a-radio-button>
              </a-radio-group>
            </div>
          </div>
          <!-- 统计主体 -->
          <div class="statistics-body">
            <a-empty :image="simpleImage" />
          </div>
        </div>
      </a-col>
      <a-col :sm="11" class="padding-r-no">
        <div class="statistics">
          <div>
            <pie-chart-outlined class="color-blue font-16" />
            <span class="title color-green"> {{ l('VersionStatistics') }}</span>
            {{ startTime }}-{{ endTime }}
          </div>
          <div class="statistics-body">
            <div
              v-if="editionChartIsShow"
              style="height: 100%; width: 100%"
              ref="edition-chart"
            ></div>

            <a-empty v-else :image="simpleImage" />
          </div>
        </div>
      </a-col>
    </a-row>
    <a-row :gutter="24" style="margin: 0 10px">
      <a-col :sm="13" class="padding-r-no">
        <div class="statistics">
          <!-- 统计头部 -->

          <div class="padding-bottom">
            <history-outlined class="color-red font-16" />
            <span class="title color-red"> {{ l('SubscriptionExpiringTenants') }}</span>
            {{ l('Has') }}{{ impendingTenantsTotal }}{{ l('Tenants') }}{{ l('WillExpireIn30Days') }}
          </div>
          <div>
            <a-table
              :scroll="{ y: '200px' }"
              :dataSource="expiringTenant"
              :columns="subscriptionColumns"
              :pagination="false"
              size="small"
            />
          </div>
          <!-- 查看所有 -->
          <div style="float: right">
            <a href="">{{ l('ReadMore') }}</a>
          </div>
        </div>
      </a-col>
      <a-col :sm="11" class="padding-r-no">
        <div class="statistics">
          <div class="padding-bottom">
            <span class="title color-blue"> {{ l('recentlyTenants') }}</span>
            {{ startTime }}-{{ endTime }}
          </div>
          <!-- 表格 -->
          <div>
            <a-table
              :scroll="{ y: '200px' }"
              :dataSource="recentTenant"
              :columns="tenantColumns"
              :pagination="false"
              size="small"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.key == 'creationTime'">
                  {{ _moment(record.creationTime) }}
                </template>
              </template>
            </a-table>
          </div>
          <!-- 查看所有 -->
          <div style="float: right">
            <a href="">{{ l('ReadMore') }}</a>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts">
  import { AppComponentBase } from '/@/shared/component-base';
  import { defineComponent } from 'vue';
  import { Empty } from 'ant-design-vue';
  import { PieChartOutlined, HistoryOutlined } from '@ant-design/icons-vue';
  import {
    ExpiringTenant,
    HostDashboardServiceProxy,
    RecentTenant,
    TopStatsData,
  } from '/@/shared/service-proxies';
  import * as echarts from 'echarts'; //引入图表插件

  import { Dayjs } from 'dayjs';
  export default defineComponent({
    name: 'host-dashboard',
    mixins: [AppComponentBase],
    components: {
      PieChartOutlined,
      HistoryOutlined,
    },
    props: {
      startTime: {
        type: Dayjs,
      },
      endTime: {
        type: Dayjs,
      },
      rangePicker: {
        type: Array,
      },
    },
    data() {
      return {
        dataPicker: 'daily',
        simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
        hostDashboardServiceProxy: new HostDashboardServiceProxy(),
        impendingTenantsTotal: 10,
        subscriptionList: [],
        subscriptionColumns: [
          { title: this.l('TenancyName'), dataIndex: 'tenantName', key: 'tenantName' },
          {
            title: this.l('DaysRemaining'),
            dataIndex: 'remainingDayCount',
            key: 'remainingDayCount',
          },
        ],
        tenantColumns: [
          { title: this.l('TenancyName'), dataIndex: 'name', key: 'name' },
          { title: this.l('CreationTime'), dataIndex: 'creationTime', key: 'creationTime' },
        ],
        cardInfo: [
          {
            title: this.l('NewSubscriptionTenant'),
            total: 'newSubscriptionAmount',
            percent: 100,
            color: '#1890ff',
            showInfo: false,
          },
          {
            title: this.l('NewRegisterTenant'),
            total: 'newTenantsCount',
            percent: 100,
            color: '#8950fc',
            showInfo: false,
          },
          {
            title: this.l('SampleStatistics'),
            total: 'dashboardPlaceholder1',
            percent: 60,
            color: '#f64e60',
            showInfo: true,
          },
          {
            title: this.l('SampleStatistics2'),
            total: 'dashboardPlaceholder2',
            percent: 80,
            color: '#1bc5bd',
            showInfo: true,
          },
        ],
        topStatus: new TopStatsData(),
        recentTenant: [] as RecentTenant[],
        expiringTenant: [] as ExpiringTenant[],
        editionChartIsShow: false,
        statisticsChartOption: {
          tooltip: {
            trigger: 'item',
          },
          legend: {
            bottom: 10,
            position: 'bottom',
          },
          series: [
            {
              type: 'pie',
              radius: '50%',
              data: [],
            },
          ],
        },
      };
    },
    methods: {
      /** 获取头部数据 */
      getTopStatus(): void {
        this.hostDashboardServiceProxy
          .getTopStatsData(
            this.rangePicker && this.rangePicker.length ? (this.rangePicker[0] as any) : undefined,
            this.rangePicker && this.rangePicker.length ? (this.rangePicker[1] as any) : undefined,
          )
          .then((res) => {
            this.topStatus = res;
          });
      },
      /** 获取版本统计 */
      getEditionTenantStatistics(): void {
        this.hostDashboardServiceProxy
          .getEditionTenantStatistics(
            this.rangePicker && this.rangePicker.length ? (this.rangePicker[0] as any) : undefined,
            this.rangePicker && this.rangePicker.length ? (this.rangePicker[1] as any) : undefined,
          )
          .then((res) => {
            if (res && res.editionStatistics && res.editionStatistics.length) {
              res.editionStatistics.forEach((item) => {
                (item as any).name = item.label;
              });
              this.editionChartIsShow = true;
              this.statisticsChartOption.series[0].data = res.editionStatistics as any;
              setTimeout(() => {
                echarts
                  .init(this.$refs['edition-chart'] as any)
                  .setOption(this.statisticsChartOption); //配置项加载到表格中
              }, 50);
            }
          });
      },
      /** 获取最近的租户 */
      getRecentTenantsData() {
        this.hostDashboardServiceProxy.getRecentTenantsData().then((res) => {
          this.recentTenant = res.recentTenants as any;
        });
      },
      /** 获取订阅到期的租户 */
      getSubscriptionExpiringTenantsData(): void {
        this.hostDashboardServiceProxy.getSubscriptionExpiringTenantsData().then((res) => {
          this.expiringTenant = res.expiringTenants as any;
          this.impendingTenantsTotal =
            (res.expiringTenants as any).length < 10 ? (res.expiringTenants as any).length : 10;
        });
      },
    },
    mounted() {
      this.getTopStatus();
      this.getEditionTenantStatistics();
      this.getRecentTenantsData();
      this.getSubscriptionExpiringTenantsData();
    },
  });
</script>

<style lang="less" scoped>
  @import './host-dashboard.less';
</style>
